<template>
	<view class="charts">
		<f2 :init="initChart" :charts="chartCopyData" />
	</view>
</template>

<script>
	import f2 from '@/components/i-uni-f2/f2.vue'
	export default {
		name: 'ChartHealthFourLine',
		props: {
			chartData: Object
		},
		data() {
			return {};
		},
		created() {},
		computed: {
			chartCopyData() {
				return this.chartData.data;
			}
		},
		components: {
			f2
		},
		methods: {
			initChart(F2, config) {
				const chart = new F2.Chart(config);
				chart.source(this.chartData.data);
				chart.axis(this.chartData.x, {
					tickLine: {
						lineWidth: 1,
						stroke: '#555555',
						length: 5,
						alignTick: false
					},
					line: {
						lineWidth: 1,
						stroke: '#555555',
						top: true, // 展示在最上层
					},
				});
				chart.axis(this.chartData.y[0], {
					grid: () => {
						return {
							stroke: '#A6ADB7',
							lineDash: null
						}
					},
					label: {
						fill: '#555555'
					}
				});
				chart.line().shape('smooth').position(this.chartData.x + '*' + this.chartData.y[0]).color(this.chartData.y[
					1], this.chartData.color);
				chart.legend({
					position: 'top',
					custom: true,
					align: 'center',
					wordSpace: 10,
					itemGap: 20,
					itemWidth: null,
					items: [{
						name: this.chartData.name[0],
						marker: (x, y, r, ctx) => {
							r = 4;
							ctx.lineWidth = 2;
							ctx.fillStyle = this.chartData.color[0];
							ctx.strokeStyle = this.chartData.color[0];
							ctx.moveTo(x - r - 8, y);
							ctx.lineTo(x - r - 2, y);
							ctx.stroke();
							ctx.moveTo(x + r, y);
							ctx.lineTo(x + r + 2, y);
							ctx.stroke();
							ctx.arc(x - 3, y, r, 0, Math.PI * 2, false);
							ctx.stroke();
						}
					}, {
						name: this.chartData.name[1],
						marker: (x, y, r, ctx) => {
							r = 4;
							ctx.lineWidth = 2;
							ctx.fillStyle = this.chartData.color[1];
							ctx.strokeStyle = this.chartData.color[1];
							ctx.moveTo(x - r - 8, y);
							ctx.lineTo(x - r - 2, y);
							ctx.stroke();
							ctx.moveTo(x + r, y);
							ctx.lineTo(x + r + 2, y);
							ctx.stroke();
							ctx.arc(x - 3, y, r, 0, Math.PI * 2, false);
							ctx.stroke();
						}
					}]
				});
				chart.tooltip({
					showTitle: true,
					layout: 'vertical',
					background: {
						radius: 4,
						fill: '#ffffff',
						padding: [6, 10],
						shadowColor: 'rgba(0, 0, 0, 0.2)',
						shadowBlur: 20
					},
					titleStyle: {
						fontSize: 14,
						fill: '#555555',
						textAlign: 'start',
						textBaseline: 'top'
					},
					nameStyle: {
						fontSize: 14,
						fill: '#555555',
						textAlign: 'start',
						textBaseline: 'middle'
					},
					valueStyle: {
						fontSize: 14,
						fill: '#555555',
						textAlign: 'start',
						textBaseline: 'middle'
					},
					onShow: (obj) => {
						obj.tooltip.offsetY = 40;
						obj.items[0].name = this.chartData.name[0];
						obj.items[1].name = this.chartData.name[1];
						obj.items[0].value += this.chartData.unit[0];
						obj.items[1].value += this.chartData.unit[1];
					}
				});

				chart.guide().text({
					position: ['-3.5%', '-12%'],
					content: '个',
					style: {
				 	fill: '#A0A7B8'
					}
				});
				chart.scale(this.chartData.x, {
					tickCount: 4,
				})
				chart.scale(this.chartData.y[0], {
					tickCount:6,
					nice:true,
					range:[0,1],
					isRounding:true,
				})
				chart.point().position(this.chartData.x + '*' + this.chartData.y[0]).color(this.chartData.y[1], this
					.chartData.color).style(this.chartData.y[0], {
					lineWidth: 2,
					fill: '#FFF',
					r: function r(val) {
						return 3;
					}
				})
				chart.render();

				return chart
			}
		}
	}
</script>

<style scoped>
	#threeLine {
		width: 100%;
		height: 100%;
	}

	.charts {
		width: 100%;
		height: 100%;
	}
</style>
